<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="jQuery.js"></script>
<script src="todolist.js"></script>
<style>
    * {
        margin: 0;
    }

    body {
        background: rgb(201, 201, 201);
    }

    li {
        list-style: none;
        font-size: 25px;
    }

    input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    nav {
        height: 80px;
        background-color: black;
    }

    .with {
        margin: 0 auto;
        width: 800px;
        height: 80px;
        font-size: 30px;
    }

    .with span {
        float: left;
        margin-top: 20px;
        color: blanchedalmond;
    }

    nav .with input {
        padding: 0 20px;
        margin: 20px;
        float: left;
        border: 5px solid #fff;
        width: 400px;
        height: 30px;
        border-radius: 10px;
        font-size: 20px;
    }

    nav .with input:focus {
        outline: none;
    }

    .ing {
        padding-top: 30px;
    }

    li {
        margin-top: 10px;
        padding: 5px;
        width: 600px;
        background-color: rgb(255, 255, 255);
        border-radius: 5px;
        box-sizing: border-box;
    }

    li:hover {
        transition: all .3s;
        transform: translateY(-2px);
        box-shadow: 0px 5px 5px #36363671;
    }

    li p {
        width: 320px;
        display: inline-block;
    }

    li input {
        margin: 0 13px;
    }

    li a {
        width: 65px;
        color: black;
        text-align: center;
        margin: 5px 10px;
        float: right;
        font-size: 20px;
        text-decoration: none;
        border-radius: 10px;
        display: inline-block;
        background-color: rgb(226, 226, 226);
        cursor: pointer;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    }

    .ee {
        height: 50px;
    }

    .ee h3 {
        float: left;
    }

    .ee span {
        color: rgba(0, 0, 0, 0.5);
        margin-right: 190px;
        padding: 0 10px;
        float: right;
        font-size: 20px;
        background-color: white;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
        border-radius: 20px;
    }

    .end {
        padding-top: 20px;
    }

    .end li {
        background: rgb(177, 177, 177);
    }

    .end li a {
        background: rgb(218, 218, 218);
    }
</style>

<body>
    <nav>
        <div class="with">
            <span>ToDoList</span>
            <input type="text" placeholder="输入" id="title">
        </div>
    </nav>
    <div class="with body">
        <div class="ing">
            <div class="ee">
                <h3>正在进行</h3>
                <span class="todoCount"> 3</span>
            </div>
            <ol id="todolist" class="demo-box">
                <!-- <li>
                        <input type="checkbox" name="" id="">
                        <p>123</p>
                        <a href='javascript:;'>删除</a>
                    </li> -->
                <!-- <li>
                    <input type="checkbox" name="" id="">
                    <p>123</p>
                </li> -->
            </ol>
        </div>
        <div class="end">
            <div class="ee">
                <h3>已经完成</h3>
                <span class='doneCount'>3</span>
            </div>

            <ul id="todolist" class="demo-box">

            </ul>
        </div>
    </div>
    <script>
        // var todolist = [{
        //     title: '内容1',
        //     done: false
        // },
        // {
        //     title: '内容2',
        //     done: false
        // }];
        // localStorage.setItem("todo", JSON.stringify(todolist));
        // //本地存储只能存储字符串的数据格式
        // var data = localStorage.getItem("todo");
        // console.log(typeof (data));
        // //Josn转对象
        // data = JSON.parse(data);
        // console.log(data);
    </script>
</body>

</html>